<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="condition.email" placeholder="请输入要查询的邮箱" @input="selectByPage(1)"/>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-select
                v-model="condition.status"
                clearable
                placeholder="请选择状态"
                :value-on-clear="null"
                style="width: 200px"
                @change="selectByPage(1)">
              <el-option label="禁用" value="2"/>
              <el-option label="正常" value="1"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID"/>
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="realname" label="真实姓名"/>
          <el-table-column prop="sex" label="性别"/>
          <el-table-column prop="idCard" label="身份证号"/>
          <el-table-column prop="phone" label="电话"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="regTime" label="注册时间"/>
          <el-table-column label="使用状态">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.status"
                  inline-prompt
                  style="--el-switch-off-color: #13ce66; --el-switch-on-color: #ff4949"
                  active-text="禁用"
                  inactive-text="正常"
                  :active-value="2"
                  :inactive-value="1"
                  @change="deleteAdmin(scope.row.id,scope.row.status)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" type="success" @click="selectByIdd(scope.row.id)">重置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 15px;">
          <div class="example-pagination-block">
            <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                           @change="selectByPage"
                           style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                           v-model:current-page="pageInfo.pageNum"/>
          </div>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import userApi from "@/api/userApi.js";

//搜索条件
const condition = ref({
  email: null,
  status: null,
})

//分页信息
const pageInfo = ref({
  pages: 0,
  pageNum: 0,
  pageSize: 0
})
const user = ref({
  id: null,
  status: null
})

//分页查询
function selectByPage(pageNum) {
  userApi.selectByPage(condition.value, pageNum, 5)
      .then(resp => {
        //console.log(resp.data)
        pageInfo.value = resp.data;
      })
}

selectByPage(1);


//删除
function deleteAdmin(id) {
  userApi.delete(id)
      .then(resp => {
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        //刷新表格
        selectByPage(1)
      })

}

function selectByIdd(id) {
  userApi.selectById(id)
      .then(resp => {
        console.log(resp.data)
        user.value = resp.data
        again(id)
      })
}

//重置密码
function again(id) {
  userApi.backPwd(id)
      .then(resp => {
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        selectByPage(pageInfo.value.pageNum)
      })
}

</script>

<style scoped>

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>